<template>
  <div class="el-main">
    <el-form ref="form" :model="video" :rules="rules" label-width="120px">
      <el-form-item label="视频标题" prop="title">
        <el-input v-model="video.title"></el-input>
      </el-form-item>
      <el-form-item v-show="false" label="id">
        <el-input v-model="video.id"></el-input>
      </el-form-item>
      <el-form-item label="新闻内容" prop="url">
        <el-upload class="avatar-uploader"
                   :action="this.w+'/videos/uploadVideo'"
                   :on-remove="(file, fileList)=>removeVideo(file, fileList)"
                   :data="{FoldPath:'D:\\upload\\video',SecretKey:'安全验证'}"
                   :on-progress="uploadVideoProcess"
                   :on-success="handleVideoSuccess"
                   :before-upload="beforeUploadVideo"
                   :show-file-list="false">
          <video v-if="videoForm.showVideoPath !='' && !videoFlag"
                 v-bind:src="this.w+'/videos/showVideo?fileName='+ videoForm.showVideoPath"
                 class="avatar video-avatar"
                 controls="controls">
            您的浏览器不支持视频播放
          </video>
          <i v-else-if="videoForm.showVideoPath =='' && !videoFlag"
             class="el-icon-plus avatar-uploader-icon"/>
          <el-progress v-if="videoFlag === true"
                       type="circle"
                       v-bind:percentage="videoUploadPercent"
                       style="margin-top:7px;"></el-progress>
        </el-upload>

      </el-form-item>
      <div style="padding-right: 400px;color: red">目前视频上传仅支持Ogg、mp4、WebM格式，且大小应该小于250M</div>
      <el-form-item>
        <el-button :disabled="videoForm.showVideoPath ===''" type="primary" @click="onSubmit('form')">保存</el-button>
        <el-button @click="exit()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {MessageBox, Message} from 'element-ui';

  export default {
    name: "videoAdd",
    data() {
      return {
        videoFlag: false,
        //是否显示进度条
        videoUploadPercent: "",
        //进度条的进度，
        isShowUploadVideo: false,
        //显示上传按钮
        videoForm: {
          showVideoPath: ''
        },
        video: {
          title: '',
          url: '',
        },
        rules: {
          title: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
          ],

        }

      }
    },
    methods: {
      uploadVideo(params) {
        let uploadData = new FormData();
        uploadData.append('file', params.file);
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        this.uploadPoster('homed'+new Date().getTime()+'/'+params.file.name, uploadData, config);
      },

      uploadPoster(url, obj, config) {
        let that=this;
        let poster_upload_path = "/w/videos/uploadVideo";
        that.instance.post(poster_upload_path, obj, config).then(function (res) {

          that.video.url=res.url;
          that.videoForm.showVideoPath=res.url;
        })

      },
      removeVideo(file, fileList) {
        console.log(fileList);
      },

      //上传前回调
      beforeUploadVideo(file) {
        let fileSize = file.size / 1024 / 1024 < 250;
        //, 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'
        if (['video/mp4','video/ogg'].indexOf(file.type) == -1) {
          Message.info("目前视频上传仅支持Ogg、mp4、WebM格式");
          return false;
        }
        if (!fileSize) {
          Message.info("视频大小不能超过250MB");
          return false;
        }
        this.isShowUploadVideo = false;
      },
      //进度条
      uploadVideoProcess(event, file, fileList) {
        let that=this;
        that.videoFlag = true;
        that.videoUploadPercent = file.percentage.toFixed(0) * 1;
      },
      //上传成功回调
      handleVideoSuccess(res, file) {
        let that=this;

        that.isShowUploadVideo = true;
        that.videoFlag = false;
        that.videoUploadPercent = 0;

        //前台上传地址
        //if (file.status == 'success' ) {
        //    this.videoForm.showVideoPath = file.url;
        //} else {
        //     layer.msg("上传失败，请重新上传");
        //}

        //后台上传地址
        if (res.status == "success") {
          that.video.url=res.url;
          that.videoForm.showVideoPath=res.url;
        } else {
          Message.info(res.Message);
        }
      },
      onSubmit(form) {
        let that = this;
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.instance.post('/w/videos', that.video)
              .then(function (response) {
                that.$router.push({name: 'video'})
              })
              .catch(function (error) {
                console.log(error);
              });
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      exit(){
        this.$router.push({name: 'video'}) // 只能用 name
      }
    },
    mounted() {

    },
    created() {
      let that = this;
      that.video.type = that.$route.query.type
    }
  }
</script>

<style scoped lang="scss">
  .quill-editor {
    min-height: 200px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .video-avatar {
    width: 400px;
    height: 200px;
  }

</style>
<style>
  .ql-editor {
    min-height: 200px;
  }

</style>
